<template>
  <view class="evaluate">
    <view class="A">
      <!-- 标题 -->
      <view class="title">评论</view>
      <!-- 内容 -->
      <view class="contain">
        <scroll-view scroll-y v-if="commentList.length != 0">
          <view
            style="margin-top: 20rpx; padding-bottom: 40rpx; border-bottom: 1rpx solid #ccc"
            v-for="(iten, index) in commentList"
            :key="iten"
          >
            <!-- 用户信息 -->
            <view class="user">
              <view class="avatar"><image :src="iten.avatar" /></view>
              <view class="userinfo">
                <view>{{ iten.username }}</view>
                <view style="font-size: 24rpx; color: #a5a2a2">{{ iten.commentTime }}</view>
              </view>
            </view>
            <!-- 评论内容 -->
            <view class="text">
              {{ iten.content }}
            </view>
            <!-- 回复 -->
            <view style="display: flex; justify-content: space-between">
              <view class="reply" @tap="reply(iten, index)">回复</view>
              <view class="unfold" @tap="toggleExpand(index)" v-if="iten.subComment.length != 0"
                >展开</view
              >
            </view>
            <uni-transition
              ref="ani"
              custom-class="transition"
              :mode-class="'fade'"
              :show="comments[index].isExpanded"
            >
              <!-- 子级评论 -->
              <view class="reply_contain" v-if="iten.subComment.length != 0">
                <view class="replyItem" v-for="it in iten.subComment" :key="it.account">
                  <!-- 用户信息 -->
                  <view class="reply_user">
                    <view class="reply_avatar"><image :src="it.avatar" /></view>
                    <view class="reply_userinfo">
                      <view>{{
                        it.parentUsername ? `${it.username}@${it.parentUsername}` : `${it.username}`
                      }}</view>
                      <view>{{ it.commentTime }}</view>
                    </view>
                  </view>
                  <view
                    style="font-size: 24rpx; color: #807d7d; text-align: right"
                    @tap="replysub(it, index)"
                    >回复</view
                  >
                  <view class="replytext">
                    {{ it.content }}
                  </view>
                </view>
              </view>
            </uni-transition>
          </view>
        </scroll-view>
        <view v-else class="empty"
          ><image src="../../../static/images/plunempty.png" mode="scaleToFill"
        /></view>
      </view>
    </view>
    <!-- 底部 -->
    <view class="B">
      <view v-if="input_type == 1" class="input" ref="comment_reply">
        <textarea
          class="input_item"
          placeholder="善于结善缘,恶语伤人心"
          placeholder-style="color:#8d8a8a"
          v-model="commentInput"
        />
      </view>
      <view v-else class="input" ref="comment_reply">
        <textarea
          class="input_item"
          @blur="Blur"
          :focus="true"
          :auto-blur="true"
          :placeholder="placeholder"
          placeholder-style="color:#8d8a8a"
          v-model="commentInput"
        />
      </view>
      <view v-show="input_type == 1" class="send" @tap="send">发送</view>
      <view v-show="input_type == 2" class="send" @tap="subreply">回复</view>
    </view>
  </view>
</template>



<script setup lang="ts">
import { ref, defineProps, defineExpose, onMounted } from 'vue'
import {
  getNewsDetaiAPI,
  getCommentAPI,
  publishCommentAPI,
  publishSubcommentAPI,
} from '@/services/detail'
import { useMemberStore } from '@/stores/index'
const query = defineProps<{ newsId: string }>()
const value = ref(['0'])
const content = ref('content')
const isShow = ref(false)
const ani = ref()
//评论请求参数
const listForm = ref({
  newsId: parseInt(query.newsId),
  page: 1,
  pageSize: 10000,
})

let comments = ref()
const toggleExpand = (index: number) => {
  comments.value[index].isExpanded = !comments.value[index].isExpanded
}
//获取评论的api
const commentList = ref<any>()
const getCommentList = async () => {
  const res = await getCommentAPI(listForm.value)
  commentList.value = res.data.list
  comments = ref(Array.from({ length: commentList.value.length }, () => ({ isExpanded: true })))
}
//发送评论
const memberStore = useMemberStore()
const commentInput = ref('')
const send = async () => {
  let commentForm = {
    newsId: parseInt(query.newsId),
    account: memberStore.profile?.user.account,
    content: commentInput.value,
    commentTime: new Date().getTime(),
  }
  const res = await publishCommentAPI(commentForm)
  if (res.code == 200) {
    uni.showToast({ icon: 'none', title: '发送成功' })
    commentInput.value = ''
    getCommentList()
  }
}
let input_type = ref(1)
const placeholder = ref('')
const Focus = ref(true)
let comment_reply = ref()
//点击回复
let parentAccount = ref('')
let parentCommentId = ref('')
let parentUsername = ref('')
let Index = ref(0)
const reply = (iten: any, index: number) => {
  console.log(iten)

  input_type.value = 2
  parentAccount.value = iten.account
  parentCommentId.value = iten.id
  parentUsername.value = iten.username
  Index.value = index
  placeholder.value = `回复: @${iten.username}`
}

//回复评论
const subreply = async () => {
  let commentForm = {
    newsId: parseInt(query.newsId),
    account: memberStore.profile?.user.account,
    content: commentInput.value,
    commentTime: new Date().getTime(),
    parentAccount: parentAccount.value,
    parentCommentId: parentCommentId.value,
  }

  const date = new Date(commentForm.commentTime)
  const formattedDate = `${date.getFullYear()}-${padZero(date.getMonth() + 1)}-${padZero(
    date.getDate(),
  )}T${padZero(date.getHours())}:${padZero(date.getMinutes())}:${padZero(date.getSeconds())}`
  const res = await publishSubcommentAPI(commentForm)
  if (res.code == 200) {
    uni.showToast({ icon: 'none', title: '回复成功' })
    commentInput.value = ''
  } else {
    uni.showToast({ icon: 'none', title: '回复失败' })
    return
  }
  commentForm.commentTime = formattedDate
  commentList.value[Index.value].subComment.push({
    ...commentForm,
    ...{
      avatar: memberStore.profile?.user.avatar,
      username: memberStore.profile?.user.username,
      parentUsername: parentUsername.value,
    },
  })
  // console.log(res.data)
}
//时间格式化
function padZero(num: number) {
  return num < 10 ? `0${num}` : num
}
//失去焦点
const Blur = () => {
  if (input_type.value == 2 && commentInput.value.length == 0) {
    console.log('触发了')
    input_type.value = 1
  }
}
//回复二级
const replysub = (iten: any, index: number) => {
  input_type.value = 2
  parentAccount.value = iten.account
  parentCommentId.value = iten.parentCommentId
  parentUsername.value = iten.username
  Index.value = index
  placeholder.value = `回复: @${iten.username}`
}
onMounted(() => {})
defineExpose({ getCommentList: getCommentList() })
</script>

<style lang="scss">
.evaluate {
  height: calc(100vh - 200rpx);
  width: 100%;
  display: flex;
  flex-direction: column;

  .A {
    padding: 0 20rpx;
    flex: 1;
    display: flex;
    flex-direction: column;

    .title {
      height: 100rpx;
      line-height: 100rpx;
      font-size: 32rpx;
    }

    .contain {
      height: calc(100vh - 400rpx);
      padding: 0 20rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      .empty {
        width: 300rpx;
        height: 300rpx;
      }
      .user {
        width: 100%;
        height: 80rpx;
        display: flex;

        .avatar {
          height: 100%;
          width: 80rpx;
          border-radius: 80rpx;
          overflow: hidden;
        }
        .userinfo {
          height: 100%;
          flex: 1;
          display: flex;
          justify-content: space-between;
          line-height: 80rpx;
          font-size: 28rpx;
          margin-left: 10rpx;
        }
      }
      .text {
        width: 100%;
        margin-top: 20rpx;
        font-size: 28rpx;
        word-wrap: break-word;
        word-break: break-all;
      }
      .reply {
        height: 40rpx;
        width: 100rpx;
        margin-top: 20rpx;
        background-color: #ccc;
        font-size: 28rpx;
        color: #adabab;
        text-align: center;
        line-height: 40rpx;
        border-radius: 10rpx;
      }
      .unfold {
        height: 40rpx;
        width: 100rpx;
        margin-top: 20rpx;
        color: #adabab;
        font-size: 28rpx;
        text-align: center;
        line-height: 40rpx;
      }
    }
  }

  .B {
    height: 100rpx;
    width: 100%;
    border-top: 2rpx solid #ccc;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .send {
      width: 130rpx;
      height: 65rpx;
      background-color: #f04142;
      border-radius: 20rpx;
      line-height: 65rpx;
      text-align: center;
      color: #fff;
    }
    .input {
      height: 80rpx;
      width: 60%;
      background-color: #ecebeb;
      border-radius: 20rpx;
      display: flex;
      .input-placeholder {
        color: #8d8a8a;
      }

      .input_item {
        height: 100%;
        width: 100%;
        padding: 10rpx 20rpx;
        color: #323131;
      }
    }
  }
}
.fade-leave,   // 离开前,进入后透明度是1
.fade-enter-to {
  opacity: 1;
}
.fade-leave-active,
.fade-enter-active {
  transition: all 1.5s; //过度是2秒
}
.fade-leave-to,
.fade-enter {
  opacity: 0;
}
.reply_contain {
  background-color: #eee;
  padding: 10px;
  margin-top: 10px;
  .replyItem {
    margin-bottom: 20rpx;
    .reply_user {
      display: flex;
      .reply_avatar {
        height: 50rpx;
        width: 50rpx;
        border-radius: 50rpx;
        overflow: hidden;
      }
      .reply_userinfo {
        flex: 1;
        display: flex;
        justify-content: space-between;
        margin-left: 20rpx;
        font-size: 24rpx;
        line-height: 50rpx;
      }
    }
    .replytext {
      width: 100%;
      margin-top: 20rpx;
      font-size: 24rpx;
      word-wrap: break-word;
      word-break: break-all;
    }
  }
}
</style>